<template>
  <page-meta
    :page-style="'overflow:' + (popupVisible || modalVisible ? 'hidden' : 'visible')"
  ></page-meta>
  <PageContainer>
    <view class="container">
      <Header title="撮合申请详情" />
      <view class="bg-white pa-16 mb-12">
        <view class="fz-16 default-color mb-12 font-bold" style="word-break: break-all">
          <text>撮合申请信息</text>
        </view>
        <InfoRow
          label="申请类型："
          :value="data?.applyType === MatchApplyTypeEnum.apply ? '申请撮合' : '申请介入'"
        />

        <InfoRow label="合作原因：" :value="data?.boIntention" />
        <InfoRow label="联系方式：" :value="data?.boContact" />
        <InfoRow
          v-if="data?.incentiveOpen"
          color="#EA5E0E"
          label="撮合激励："
          :value=" getIncentiveDetails({
                          estimatedScale: data.estimatedScale,
                          incentiveOpen: data.incentiveOpen,
                          incentiveType: data.incentiveType,
                          showIncentiveDetails: data.incentiveDetails,
                          showCommissionRate: data.incentiveCommissionRate!,
                        })"
        />
        <InfoRow label="申请时间：" :value="data?.applyTime" />
        <view class="mb-12">
          <MatchingItem :id="data?.boUserApplyTypeId" :status="data?.flowStatus" :is-audit="true" />
        </view>
        <view class="fz-16 default-color font-bold mb-12"><text>关联供需</text></view>
        <view
          class="pa-12 disFlxAC br-8"
          style="background-color: #f2f3f5"
          @click="toSupplyDemandDetails"
        >
          <TImage
            v-if="data?.boType === BoTypeEnum.Supply"
            class="flex-shrink-0 mr-4"
            src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/gong.png"
            width="40rpx"
            height="40rpx"
          />
          <TImage
            v-else
            class="flex-shrink-0 mr-4"
            src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/xu.png"
            width="40rpx"
            height="40rpx"
          />
          <text class="fz-14 default-color flex-1 ov-1">{{ data?.title }}</text>
          <text class="ali-icon fz-16 ml-12" style="color: #969799">&#xe67b;</text>
        </view>
      </view>
      <view class="mb-12">
        <PersonnelInfo
          title="被对接者信息"
          :avatar="data?.publishAvatar"
          :company-name="data?.publishCompanyName"
          :company-position="data?.publishCompanyPositionName"
          :user-name="data?.publishUserName"
          :member-level-name="data?.publishLevelName"
          :org-name="data?.publisOrgName"
        />
      </view>
      <view class="mb-12">
        <PersonnelInfo
          title="意向发起人信息"
          :avatar="data?.applyAvatar"
          :company-name="data?.applyCompanyName"
          :company-position="data?.applyCompanyPositionName"
          :user-name="data?.applyUserName"
          :member-level-name="data?.applyLevelName"
          :org-name="data?.applyOrgName"
        />
      </view>
      <view class="pa-16">
        <view class="fz-16 default-color font-bold mb-12"><text>意向详情</text></view>
      </view>
      <view class="br-8 overflow-hidden bg-white">
        <BasicsForm :schemas="schemas" @register="register" />
      </view>
      <TButtonGroup v-if="data?.approvalStatus === MatchApprovalStatusEnum.pending" show-background>
        <TButton
          text="拒绝撮合"
          class="gutter-btn"
          type="primary"
          :customStyle="{
            backgroundColor: '#EA5E0E',
          }"
          custom-class="h-44 linh-44 br-22"
          @click="modalVisible = true"
        />
        <TButton
          text="同意撮合"
          type="primary"
          class="gutter-btn"
          custom-class="h-44 linh-44 br-22"
          @click="popupVisible = true"
        />
      </TButtonGroup>
      <ShowModal
        v-model="modalVisible"
        title="拒绝撮合申请"
        content-width="100%"
        cancel-text="取消"
        confirm-text="立即拒绝"
        confirm-color="#EA5E0E"
        :is-mask-click="false"
        :confirm-auto-close="false"
        @confirm="handleRejectConfirm"
      >
        <template #content>
          <view class="pa-20" style="width: 100%">
            <view class="fz-14 mb-16" style="color: #969799">
              <text>告知一下用户为什么会被拒绝吧</text>
            </view>
            <view style="background-color: #f2f3f5">
              <FormInput
                v-model="inputVal"
                type="textarea"
                :maxlength="100"
                placeholder="请填写拒绝原因"
              />
            </view>
          </view>
        </template>
      </ShowModal>
      <ScrollTop :bottom="220" />
      <CooperativeAuditPopup v-model="popupVisible" :data="data" @refresh="getData" />
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* cooperativeAuditDetail 撮合申请详情 */
  import {
    applyTypeAuditRecordDetails,
    applyTypeAuditRecordReview,
  } from '@/api/businessOpportunities';
  import FormInput from '@/components/Form/components/FormInput.vue';
  import CooperativeAuditPopup from '../components/CooperativeAuditPopup.vue';
  import type { IApplyTypeAuditRecordDetailsResult } from '@/api/businessOpportunities/type';
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import { navigateTo, onLoad } from '@/router';
  import { ref } from 'vue';
  import InfoRow from '../../components/InfoRow.vue';
  import { getIncentiveDetails } from '../../components/utils';
  import MatchingItem from '../../components/MatchingItem.vue';
  import {
    BoTypeEnum,
    MatchApplyTypeEnum,
    MatchApprovalStatusEnum,
  } from '@/enums/businessOpportunitiesEnum';
  import TImage from '@/components/TImage/index.vue';
  import PersonnelInfo from '../../components/PersonnelInfo.vue';
  import BasicsForm from '@/components/Form/BasicsForm.vue';
  import { useForm, type FormSchema } from '@/components/Form';
  import { forEach, isArray } from 'lodash-es';
  import { localDataMapping } from '@/components/Form/hooks/useForm';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import ScrollTop from '@/components/ScrollTop/index.vue';
  import ShowModal from '@/components/ShowModal/index.vue';
  import { Toast } from '@/utils';

  const schemas = ref<FormSchema[]>([]);
  const [register, {}] = useForm({
    labelAlign: 'left',
    labelPosition: 'top',
    validateTrigger: 'bind',
  });

  const popupVisible = ref(false);

  const data = ref<IApplyTypeAuditRecordDetailsResult>();
  onLoad<'cooperativeAuditDetail'>(async (op) => {
    const res = await getData(op.id);
    const list: FormSchema[] = [];
    if (res?.formItemList) {
      forEach(res.formItemList, (v) => {
        const answer = v.formUserItemAnswerList;
        const defaultValue = isArray(answer) ? answer[answer.length - 1].content : '';
        list.push({
          field: v.id.toString(),
          label: v.showName,
          component: v.itemType,
          defaultValue,
          dynamicDisabled: true,
          required: !!v.isRequired,
          componentProps: {
            placeholder: v.value,
            localdata: localDataMapping(v.customFormItemAnswerList || [], {
              label: 'words',
              value: 'id',
            }),
          },
        });
      });

      schemas.value = list
    }
  });

  async function getData(id?: number) {
    const res = await applyTypeAuditRecordDetails(id || data.value!.id);
    data.value = res;
    return res;
  }

  const inputVal = ref<string>('');
  const modalVisible = ref(false);
  /** 拒绝 */
  function handleRejectConfirm() {
    applyTypeAuditRecordReview({
      id: data.value!.id,
      approvalStatus: MatchApprovalStatusEnum.refuse,
      approvalRemark: inputVal.value,
    }).then((res) => {
      getData();
      Toast('已拒绝撮合申请');
      modalVisible.value = false;
      inputVal.value = '';
    });
  }

  function toSupplyDemandDetails() {
    navigateTo({ name: 'supplyDemandDetails', options: { id: data.value!.boInfoId } });
  }
</script>
